<template>
<div>
    <!-- 批量创建广告组 -->
    <!-- 加载 -->
    <div class="example">
        <a-spin size="large" tip="Loading..." :spinning="spinning" />
    </div>
<div v-if="spinning ==false">
<a-row>
    <a-col :span="3">
        <a-steps :current="0"  direction="vertical">
            <a-step>
                <template slot="title">
                    广告组
                </template>
                <p slot="description" style="margin-bottom:0;">创建场景</p>
                <p slot="description" style="margin-bottom:0;">推广目的</p>
            </a-step>
            <a-step disabled>
                <template slot="title">
                    广告计划
                </template>
                <p slot="description" style="margin-bottom:0;">投放范围</p>
                <p slot="description" style="margin-bottom:0;">投放目标</p>
                <p slot="description" style="margin-bottom:0;">用户定向</p>
                <p slot="description" style="margin-bottom:0;">预算与出</p>
            </a-step>
            <a-step disabled>
                <template slot="title">
                    广告创意
                </template>
                <p slot="description" style="margin-bottom:0;">投放位置</p>
                <p slot="description" style="margin-bottom:0;">制作创意</p>
                <p slot="description" style="margin-bottom:0;">创意分类</p>
            </a-step>
            <a-step disabled>
                <template slot="title">
                    批量规则
                </template>
                <p slot="description" style="margin-bottom:0;">批量配置</p>
                <p slot="description" style="margin-bottom:0;">提交规则</p>
            </a-step>
        </a-steps>
    </a-col>
    <a-col :span="20">
<div>
    <a-form :form="form">
    <div class="borderbox">
            <h3>hi!,请选择批量创建场景</h3>
            <div class="layui-row objectivebox" ref="typetip" prop="typetip">
                <div class="layui-col-md3" @click="onactives($event,'1')" :class="[scene==1 ? 'active' : '']">
                    <div class="campaign-card-tips">
                        <strong>按创意创建</strong>
                        <p><span class="circledis"></span>相同定向</p>
                        <p><span class="circledis"></span>每个计划对应不同创意组</p>
                    </div>
                    <div class="campaign-card-img">
                        <img :src="imgurl('icon1.c9c99892.png')" style="width:100%;margin-top:20px;" alt="">
                    </div>
                   
                </div>
                <div class="layui-col-md3" @click="onactives($event,'2')" :class="[scene==2 ? 'active' : '']">
                    <div class="campaign-card-tips">
                        <strong>按定向创建</strong>
                        <p><span class="circledis"></span>相同创意组</p>
                        <p><span class="circledis"></span>每个计划对应不同定向包</p>
                    </div>
                    <div class="campaign-card-img">
                        <img :src="imgurl('icon2.8ca47e88.png')" style="width:100%;margin-top:20px;" alt="">
                    </div>
                   
                </div>

                <div class="layui-col-md3" @click="onactives($event,'3')" :class="[scene==3 ? 'active' : '']">
                    <div class="campaign-card-tips">
                        <strong>自定义</strong>
                        <p><span class="circledis"></span>多个广告组、计划</p>
                        <p><span class="circledis"></span>不同定向包、不同创意</p>
                        <p><span class="circledis"></span>自定义配置对应关系</p>
                    </div>
                    <div class="campaign-card-img">
                        <img :src="imgurl('icon3.8da06523.png')" style="width:100%;margin-top:20px;" alt="">
                    </div>
                   
                </div>
            </div>

            <div class="pondtype" :class="[scene !=0 ? 'isblock':'isnone']">
                <div v-if="scene == 1 || scene ==2">
                    <a-form-item
                        :label="$t('对应类型')"
                        :labelCol="{span: 2}"
                        :wrapperCol="{span: 200}"
                        :required="true"
                    >
                        <a-radio-group default-value="a" v-decorator="[
                                    'corrtype',
                                    {rules:[],initialValue:'a'}
                                ]" @change="onpondtype" button-style="solid">
                            <a-radio-button value="a">
                                1个组对应多个计划
                            </a-radio-button>
                            <a-radio-button value="b">
                                1个组对应1个计划
                            </a-radio-button>
                        </a-radio-group>
                    </a-form-item>

                    <a-form-item
                        :label="$t('广告投放账号')"
                        :labelCol="{span: 2}"
                        :wrapperCol="{span: 200}"
                        :required="true"
                    >
                        <a-select
                            show-search
                            placeholder="请搜索或选择广告投放账号"
                            option-filter-prop="children"
                            style="width: 400px"
                            v-decorator="[
                            'advertiser_id',
                            { rules: [{ required: true, message: '请选择媒体账号' }] ,initialValue: launchacount},
                            ]"
                            @change="handleChange"
                        >
                            <a-select-option  v-for="item in options" :key="item.account_id" :value="item.account_id">
                                {{ item.name }}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </div>
                <div v-else>
                    <a-form-item
                        :label="$t('创建类型')"
                        :labelCol="{span: 2}"
                        :wrapperCol="{span: 200}"
                        :required="true"
                    >
                        <a-radio-group default-value="a" v-decorator="[
                                    'corrtype',
                                    {rules:[],initialValue:'a'}
                                ]" @change="onaddtype" button-style="solid">
                            <a-radio-button value="a">
                                单账号创建
                            </a-radio-button>
                            <a-radio-button value="b">
                                跨账号创建
                            </a-radio-button>
                        </a-radio-group>
                    </a-form-item>


                    <a-form-item
                        :label="$t('广告投放账号')"
                        :labelCol="{span: 2}"
                        :wrapperCol="{span: 200}"
                        :required="true"
                    >
                        <div v-if="addtype == 'a'">
                            <a-select
                                show-search
                                option-filter-prop="children"
                                style="width: 400px"
                                v-decorator="[
							    'advertiser_id',
                                { rules:[{required: true,message: '请选择媒体账号'}],initialValue: launchacount}
                                ]"
                                @change="handleChange"
                            >
                                <a-select-option  v-for="item in options" :key="item.account_id">
                                    {{ item.name }}
                                </a-select-option>
                            </a-select>
                        </div>
                       
                        <div class="mfont" v-else-if="addtype =='b'">
                            <a-input-search placeholder="请搜索或选择广告投放账号" style="width:350px;" enter-button @search="onSearchaccount" />
                                <a-table 
                                :rowSelection="rowSelection" 
                                :loading="tableloading" style="width:500px" :bordered="true" :filterMultiple="true" :columns="labelaccount" :pagination="pagination" :data-source="account">
                                    <a slot="name" slot-scope="text">{{ text.name }}</a>
                                </a-table>
                        </div>
                    </a-form-item>
                </div>

            </div>
    </div>
    <div class="borderbox" :class="[scene !=0 ? 'isblock':'isnone']">
         <div v-if="scene == 1 || scene ==2">
            <a-tabs :defaultActiveKey="pondtypenum" :activeKey="onpond" @change="callback">
            <a-tab-pane key="1" tab="创建新广告组">
                
                    <a-form-item
                        :label="$t('推广目标')"
                        :labelCol="{span: 2}"
                        :wrapperCol="{span: 200}"
                        :required="true"
                    >
                        <a-radio-group v-decorator="[
                                    'landing_type',
                                    {rules:[],initialValue:'APP'}
                                ]" @change="actives" button-style="solid">
                            <a-radio-button value="APP">
                                应用推广
                            </a-radio-button>
                            <a-radio-button value="LINK">
                                销售线索收集
                            </a-radio-button>
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item
                        :label="$t('广告组预算：')"
                        :labelCol="{span: 2}"
                        :wrapperCol="{span: 10}"
                        :required="true"
                        >
                        <div class="form-row">
                            <a-radio-group v-decorator="[
                                    'budget_mode',
                                    {rules:[],initialValue:'BUDGET_MODE_INFINITE'}
                                ]" @change="budget" button-style="solid">
                            <a-radio-button value="BUDGET_MODE_INFINITE">
                                不限
                            </a-radio-button>
                            <a-radio-button value="BUDGET_MODE_DAY">
                                指定预算
                            </a-radio-button>
                        </a-radio-group>
                        </div>
                    </a-form-item>
                    <div v-if="budgetmodes =='BUDGET_MODE_DAY'">
                        <a-form-item
                            :label="$t('日预算')"
                            :labelCol="{span: 2}"
                            :wrapperCol="{span: 10}"
                            :required="true"
                            >
                            <div class="form-row">
                            <a-input-number id="inputNumber"
                            v-decorator="[
                                'budget',
                                {rules:[],initialValue:'0'}
                            ]"
                            style="width:200px;" :min="0" :max="9999999.99" :step="0.0" />&nbsp;元
                            </div>
                        </a-form-item>
                    </div>

                    <a-form-item
                        :label="$t('广告组数量')"
                        :labelCol="{span: 2}"
                        :wrapperCol="{span: 10}"
                        :required="true"
                        >
                        <div class="form-row">
                            <a-input-number v-decorator="[
                        'num',
                        { rules: [{ required: true, message: '广告组数量为1-50的整数，请正确输入'}],initialValue:inputnum}
                        ]" :disabled="pondtrue" min="1" placeholder="请输入广告计划数量" />
                        </div>
                    </a-form-item>

                    <a-form-item
                        :label="$t('广告组名称')"
                        :labelCol="{span: 2}"
                        :wrapperCol="{span: 10}"
                        :required="true"
                        >
                        <div class="form-row">
                        <a-input v-decorator="[
                        'name',
                        { rules: [{ required: true, message: '请输入广告名称'}],initialValue:name }
                        ]" placeholder="请输入广告组名称" />
                        </div>
                    </a-form-item>

                    <a-form-item
                        :label="$t('广告组状态')"
                        :labelCol="{span: 2}"
                        :wrapperCol="{span: 10}"
                        >
                        <div class="form-row">
                            <a-switch default-checked @change="onChange" />
                        </div>
                    </a-form-item>
               
            </a-tab-pane>
            <a-tab-pane key="2" tab="选择已有广告组" :disabled="pondtypetrue" force-render>
                    <a-form-item
                    label="关键词搜索"
                    :labelCol="{span: 2}"
                    :wrapperCol="{span: 6, offset: 1}"
                    >
                        <a-input-search placeholder="请输入广告组ID或名称" enter-button @search="onSearch" />
                    </a-form-item>
                <a-list item-layout="horizontal" style="width:600px;" :data-source="datalist" :pagination="pagination">
                <!-- <router-link :to="{path:'/promotion/advering/addplan/',query: {campaign_id: item.id,landing_type:item.landing_type}}">  -->
                    <a-list-item slot="renderItem" slot-scope="item">
                        <a-list-item-meta>
                            <a slot="title">
                                <!-- <a-radio-group v-decorator="[
                        'campaign_id',
                        ]" @change="onChange">
                                    <a-radio :style="radioStyle" :value="item.id">
                                        {{item.name}}
                                    </a-radio>
                                </a-radio-group> -->
                                <input type="radio" v-decorator="[
                        'campaign_id',
                        ]" name="campaign_id" @change="onradio" :value="item.id" v-model="picked">
                                <label>{{item.name}}</label>
                            </a>
                        </a-list-item-meta> 
                        
                        <div v-if="item.landing_type =='LINK'">信息流-销售线索收集</div>
                        <div v-if="item.landing_type =='APP'">信息流-应用推广</div>
                        <div v-if="item.landing_type =='DPA'">信息流-商品目录推广</div>
                        <div v-if="item.landing_type =='GOODS'">信息流-商品推广（鲁班）</div>
                        <div v-if="item.landing_type =='STORE'">信息流-门店推广</div>
                        <div v-if="item.landing_type =='AWEME'">信息流-抖音号推广</div>
                        <div v-if="item.landing_type =='SHOP'">信息流-电商店铺推广</div>
                        <div v-if="item.landing_type =='ARTICAL'">信息流-头条文章推广</div>
                    </a-list-item>
                <!-- </router-link> -->
                </a-list>

            </a-tab-pane>
            </a-tabs>
        </div>
        <div v-else>
            <div v-if="addtype =='a'">
                <a-tabs @change="callback">
                <a-tab-pane key="1" tab="创建新广告组">
                        <a-form-item
                            :label="$t('推广目标')"
                            :labelCol="{span: 2}"
                            :wrapperCol="{span: 200}"
                            :required="true"
                        >
                            <a-radio-group v-decorator="[
                                        'landing_type',
                                        {rules:[],initialValue:'APP'}
                                    ]" @change="actives" button-style="solid">
                                <a-radio-button value="APP">
                                    应用推广
                                </a-radio-button>
                                <a-radio-button value="LINK">
                                    销售线索收集
                                </a-radio-button>
                            </a-radio-group>
                        </a-form-item>
                        <a-form-item
                            :label="$t('广告组预算：')"
                            :labelCol="{span: 2}"
                            :wrapperCol="{span: 10}"
                            :required="true"
                            >
                            <div class="form-row">
                                 <a-radio-group v-decorator="[
                                    'budget_mode',
                                    {rules:[],initialValue:'BUDGET_MODE_INFINITE'}
                                ]" @change="budget" button-style="solid">
                                    <a-radio-button value="BUDGET_MODE_INFINITE">
                                        不限
                                    </a-radio-button>
                                    <a-radio-button value="BUDGET_MODE_DAY">
                                        指定预算
                                    </a-radio-button>
                                 </a-radio-group>
                            </div>
                        </a-form-item>
                        <div v-if="budgetmodes == 'BUDGET_MODE_DAY'">
                            <a-form-item
                                :label="$t('日预算')"
                                :labelCol="{span: 2}"
                                :wrapperCol="{span: 10}"
                                :required="true"
                                >
                                <div class="form-row">
                                <a-input-number id="inputNumber"
                                v-decorator="[
                                    'budget',
                                    {rules:[],initialValue:'0'}
                                ]"
                                style="width:200px;" :min="0" :max="9999999.99" :step="0.0" />&nbsp;元
                                </div>
                            </a-form-item>
                        </div>

                        <a-form-item
                            :label="$t('广告组数量')"
                            :labelCol="{span: 2}"
                            :wrapperCol="{span: 10}"
                            :required="true"
                            >
                            <div class="form-row">
                                <a-input-number v-decorator="[
                            'num',
                            { rules: [{ required: true, message: '广告组数量为1-50的整数，请正确输入'}],initialValue:inputnum}
                            ]" min="1" placeholder="请输入广告计划数量" />
                            </div>
                        </a-form-item>

                        <a-form-item
                            :label="$t('广告组名称')"
                            :labelCol="{span: 2}"
                            :wrapperCol="{span: 10}"
                            :required="true"
                            >
                            <div class="form-row">
                            <a-input v-decorator="[
                            'name',
                            { rules: [{ required: true, message: '请输入广告名称'}],initialValue:name }
                            ]" placeholder="请输入广告组名称" />
                            </div>
                        </a-form-item>

                        <a-form-item
                            :label="$t('广告组状态')"
                            :labelCol="{span: 2}"
                            :wrapperCol="{span: 10}"
                            >
                            <div class="form-row">
                                <a-switch default-checked @change="onChange" />
                            </div>
                        </a-form-item>
                </a-tab-pane>
                <a-tab-pane key="2" tab="选择已有广告组" force-render>
                        <a-form-item
                        label="关键词搜索"
                        :labelCol="{span: 2}"
                        :wrapperCol="{span: 6, offset: 1}"
                        >
                            <a-input-search placeholder="请输入广告组ID或名称" enter-button @search="onSearch" />
                        </a-form-item>

                    <a-form-item
                        label="广告组推广目标类型"
                        :labelCol="{span: 3}"
                        :wrapperCol="{span: 6, offset: 1}"
                        >

                        <a-radio-group v-decorator="[
                                        'landing_type',
                                        {rules:[],initialValue:'APP'}
                                    ]" @change="activeson" button-style="solid">
                                <a-radio-button value="APP">
                                    应用推广
                                </a-radio-button>
                                <a-radio-button value="LINK">
                                    销售线索收集
                                </a-radio-button>
                            </a-radio-group>

                    </a-form-item>
                    
                    <a-list item-layout="horizontal" :bordered="true" style="width:600px;" :data-source="datalists" :pagination="pagination">
                        <a-list-item slot="renderItem" slot-scope="item">
                            <a-list-item-meta>
                                <a slot="title">
                                    <a-checkbox-group>
                                        <a-checkbox @change="oncampaign" :value="item.id">
                                            {{item.name}}
                                        </a-checkbox>
                                    </a-checkbox-group>
                                </a>
                            </a-list-item-meta>
                            
                            <div v-if="item.landing_type =='LINK'">信息流-销售线索收集</div>
                            <div v-if="item.landing_type =='APP'">信息流-应用推广</div>
                            <div v-if="item.landing_type =='DPA'">信息流-商品目录推广</div>
                            <div v-if="item.landing_type =='GOODS'">信息流-商品推广（鲁班）</div>
                            <div v-if="item.landing_type =='STORE'">信息流-门店推广</div>
                            <div v-if="item.landing_type =='AWEME'">信息流-抖音号推广</div>
                            <div v-if="item.landing_type =='SHOP'">信息流-电商店铺推广</div>
                            <div v-if="item.landing_type =='ARTICAL'">信息流-头条文章推广</div>
                        </a-list-item>
                    </a-list>

                </a-tab-pane>
                </a-tabs>
            </div>
            <div v-else-if="addtype =='b'">
                    <a-button type="primary" @click="addadver" :disabled="group.length == 0">
                        新建广告组
                    </a-button>

                    <a-modal
                        title="新增广告组"
                        :visible="adverbox"
                        :confirm-loading="confirmLoading"
                        @ok="adverok"
                        @cancel="adverCancel"
                        :width="700"
                    >  
                        <a-form :form="formaddver">

                            <a-form-item
                                :label="$t('广告投放账号')"
                                :labelCol="{span: 4}"
                                :wrapperCol="{span: 200}"
                                :required="true"
                            >

                            <a-select default-value="lucy" v-decorator="['account_id',
                            { rules: [{ required: true, message: '请选择广告组' }] },
                            ]" style="width: 200px" placeholder="请选择">
                                <a-select-option v-for="(item,index) in group" :key="index" :value="item.account_id">
                                    {{item.account_name}}
                                </a-select-option>
                            </a-select>

                            </a-form-item>

                            <a-form-item
                                :label="$t('推广目标')"
                                :labelCol="{span: 3}"
                                :wrapperCol="{span: 200}"
                                :required="true"
                            >
                                <a-radio-group v-decorator="[
                                            'landing_type',
                                            {rules:[],initialValue:'APP'}
                                        ]" @change="actives" button-style="solid">
                                    <a-radio-button value="APP">
                                        应用推广
                                    </a-radio-button>
                                    <a-radio-button value="LINK">
                                        销售线索收集
                                    </a-radio-button>
                                </a-radio-group>
                            </a-form-item>
                            <a-form-item
                                :label="$t('广告组预算：')"
                                :labelCol="{span: 3}"
                                :wrapperCol="{span: 10}"
                                :required="true"
                                >
                                <div class="form-row">
                                    <a-radio-group v-decorator="[
                                            'budget_mode',
                                            {rules:[],initialValue:'BUDGET_MODE_INFINITE'}
                                        ]" @change="budget" button-style="solid">
                                    <a-radio-button value="BUDGET_MODE_INFINITE">
                                        不限
                                    </a-radio-button>
                                    <a-radio-button value="BUDGET_MODE_DAY">
                                        指定预算
                                    </a-radio-button>
                                </a-radio-group>
                                </div>
                            </a-form-item>
                            <div v-if="budgetmodes =='BUDGET_MODE_DAY'">
                                <a-form-item
                                    :label="$t('日预算')"
                                    :labelCol="{span: 3}"
                                    :wrapperCol="{span: 10}"
                                    :required="true"
                                    >
                                    <div class="form-row">
                                    <a-input-number id="inputNumber"
                                    v-decorator="[
                                        'budget',
                                        {rules:[],initialValue:'0'}
                                    ]"
                                    style="width:200px;" :min="0" :max="9999999.99" :step="0.0" />&nbsp;元
                                    </div>
                                </a-form-item>
                            </div>
                            <a-form-item
                                :label="$t('广告组数量')"
                                :labelCol="{span: 3}"
                                :wrapperCol="{span: 10}"
                                :required="true"
                                >
                                <div class="form-row">
                                    <a-input-number v-decorator="[
                                'num',
                                { rules: [{ required: true, message: '广告组数量为1-50的整数，请正确输入'}],initialValue:inputnum}
                                ]" :disabled="pondtrue" min="1" placeholder="请输入广告计划数量" />
                                </div>
                            </a-form-item>
                            <a-form-item
                                :label="$t('广告组名称')"
                                :labelCol="{span: 3}"
                                :wrapperCol="{span: 10}"
                                :required="true"
                                >
                                <div class="form-row">
                                <a-input v-decorator="[
                                'name',
                                { rules: [{ required: true, message: '请输入广告名称'}],initialValue:name }
                                ]" placeholder="请输入广告组名称" />
                                </div>
                            </a-form-item>
                            <a-form-item
                                :label="$t('广告组状态')"
                                :labelCol="{span: 3}"
                                :wrapperCol="{span: 10}"
                                >
                                <div class="form-row">
                                    <!-- <a-switch default-checked v-decorator="['operation', { valuePropName: 'checked' }]" @change="onChange" /> -->
                                    <a-switch checked-children="enable" v-decorator="['operation', { rules:[],initialValue: true}]" un-checked-children="disable" :defaultChecked="true" />
                                </div>
                            </a-form-item>
                        </a-form>
                    </a-modal>

                    <a-form-item
                        label="关键词搜索"
                        :labelCol="{span: 2}"
                        :wrapperCol="{span: 6, offset: 1}"
                        >
                        <a-input-search placeholder="请输入广告组名称" :disabled="checktrue" enter-button @search="onSearchadver" />
                    </a-form-item>

                    <a-form-item
                        label="广告组推广目标类型"
                        :labelCol="{span: 3}"
                        :wrapperCol="{span: 6, offset: 1}"
                        >
                        <a-radio-group default-value="APP" v-decorator="[
                                    'landing_type',
                                    {rules:[],initialValue:'APP'}
                                ]" @change="activesontype" button-style="solid">
                            <a-radio-button value="APP" :disabled="checktrue">
                                应用推广
                            </a-radio-button>
                            <a-radio-button value="LINK" :disabled="checktrue">
                                销售线索收集
                            </a-radio-button>
                        </a-radio-group>
                    </a-form-item>
                     <a-form-item
                        label="广告账号"
                        :labelCol="{span: 2}"
                        :wrapperCol="{span: 6, offset: 1}"
                        >
                        
                        <div class="form-row" style="width:900px;">
                            <div style="display:inline-block;">
                                <a-table :columns="accountlabel" :bordered="true" tableLayout="fixed" style="width:220px;min-height:300px;height:300px !important;" :scroll="{ x: 200, y: 300 }" :pagination="pages" :data-source="group">
                                    <a slot="name" slot-scope="text,record,index" @click="onaccount(text.account_id,index)">{{ text.name }}</a>
                                </a-table>
                            </div>
                            <div style="display:inline-block;">
                                <a-table :columns="campaignlabel" :loading="loadingone" :bordered="true" style="width:220px;height:300px;" :pagination="pages" :scroll="{ x: 200, y: 300 }" :data-source="advergroup">
                                    <a slot="name" style="font-size:12px;" slot-scope="text">

                                        <!-- {{adverlist.indexOf(text)}} -->

                                        <!-- {{text.id}} -->

                                        <a-checkbox @change="onadver" class='input-checkbox' :checked="adverids.indexOf(text.id)>=0" :key="text" :value="text">
                                            {{ text.name }}
                                        </a-checkbox>
                                    </a>
                                    <!-- <span slot="customTitle"><a-icon type="smile-o" /> 11</span> -->
                                </a-table>
                            </div>
                            <div style="display:inline-block;margin-left:16px;">
                                <a-table :columns="selectedlabel"  :loading="loadingtwo" :bordered="true" style="width:220px;height:300px;" :scroll="{ x: 200, y: 300 }" :pagination="pages" :data-source="adverlist">
                                    <span slot="name" slot-scope="text,record,index">{{ text.name }} <a-icon style="float:right;cursor:pointer;list-height:20px;" @click="onclose(text,index)" type="close" /></span>
                                </a-table>
                            </div>

                           
                        </div>
                     </a-form-item>
            </div>
        </div>
    </div>
    <div class="borderbox" v-if="scene >0">
       
        <a-button @click="onback">取消创建</a-button>
        <a-modal
            title="操作提示"
            :visible="visible"
            :confirm-loading="confirmLoading"
            @ok="handleOk"
            @cancel="handleCancel"
            >
            <p>将不保存本次创建的所有数据!</p>
        </a-modal>
       
        <span style="float:right;"><a-button type="primary" :loading="logging" @click="onnext">下一步</a-button></span>
    </div>

    </a-form>
</div>
</a-col>
</a-row>
</div>
</div>
</template>
<script src="./index.js"></script>

<style scoped>

  .example {
    text-align: center;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    margin-bottom: 20px;
    /* padding: 30px 50px; */
    margin: 20px 0;
  }

.ant-table{
    min-height: 300px !important;
}

.isblock{
    display: block;
}

.mfont{
    margin-left: 100px;
}

.isnone{
    display: none;
}

.borderbox{
    border:1px solid #dcdee2;
    padding:16px;
    margin-top:20px;
}

.circledis{
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #ccc;
    margin-right: 8px;
    display: inline-block;
}


.ant-layout{
    background: #fff;
}
/* 多选按钮 */

.pondtype{
    margin-top: 20px;
}

.objectivebox .layui-col-md3{
    width:275px;
    height: 125px;
    position: relative;
    display: inline-block;
}
.disnon{
    display: none;
}

.objectivebox .layui-col-md3 .campaign-card-tips{
    width: 150px;
    display: inline-block;    
    font-size: 14px;
    color: #333;
    text-align: left;
    /* padding:20px; */
    padding:20px 0 20px 20px;
    float:left;
}

.campaign-card-tips strong{
    font-weight: 700;
}

.campaign-card-tips p{
    margin-top: 5px;
    font-size: 12px;
    color:#999;
    font-weight: 300;
    line-height: 13px;
    margin-bottom:0px;

}

.objectivebox .layui-col-md3{
    border: 1px solid #EDF1F5;
    box-shadow: 0px 2px 10px 0px rgb(0 0 0 / 5%);
    border-radius: 4px;
    margin-right: 16px;
    margin-top: 10px;
    cursor: pointer;
    position: relative;
}

.objectivebox .layui-col-md3 .campaign-card-img{
    width: 120px;
    height: 120px;
    display: inline-block;
}

.objectivebox .layui-col-md3 .campaign-card-img img{
    display: block;
    /* padding-top: 20px; */
}


/* 广告组推广目的 */
.objectivebox .layui-col-md2{
    width:275px;
    height: 125px;
    position: relative;
    display: inline-block;
}
.disnon{
    display: none;
}

.objectivebox .layui-col-md2 .campaign-card-tip{
    width: 106px;
    display: inline-block;    
    font-size: 14px;
    color: #333;
    text-align: left;
    /* padding:20px; */
    padding:20px 0 20px 20px;
    float:left;
}

.campaign-card-tip strong{
    font-weight: 700;
}

.campaign-card-tip p{
    margin-top: 10px;
    font-size: 12px;
    color:#999;
    font-weight: 300;
    line-height:1.1;
}

.objectivebox .layui-col-md2{
    border: 1px solid #EDF1F5;
    box-shadow: 0px 2px 10px 0px rgb(0 0 0 / 5%);
    border-radius: 4px;
    margin-right: 16px;
    margin-top: 10px;
    cursor: pointer;
    position: relative;
}

.objectivebox .layui-col-md2 .campaign-card-img{
    width: 120px;
    height: 120px;
    display: inline-block;
}

.objectivebox .layui-col-md2 .campaign-card-img img{
    display: block;
    /* padding-top: 20px; */
}

.objectivebox .actives{
    border-bottom:3px solid #338aff;
    height:125px;
}

.objectivebox .active{
    border-bottom:3px solid #338aff;
    height:125px;
}

.objectivebox .checkobjective{
    position: absolute;
    right: 10px;
    top: 10px;
    /* display: none; */
}

.objectivebox .checkobjective i{
    font-size: 20px;
    font-weight: bold;
    color:#338aff;
}
</style>
